<template>
  <div class="flex flex-col">
    <div class="w200 mx15">
      <div v-for="i of 11" :key="i" class="h40 px10 flex flex-justify-between" :class="`brand-${i} ${i>5?'text-white':'text-dark'}`">
        <span>{{ 'Brand'+i }}</span>
      </div>
    </div>
    <div class="w200 mx15">
      <div v-for="i of 11" :key="i" class="h40 px10 flex flex-justify-between" :class="`green-${i} ${i>5?'text-white':'text-dark'}`">
        <span>{{ 'Green'+i }}</span>
      </div>
    </div>
    <div class="w200 mx15">
      <div v-for="i of 11" :key="i" class="h40 px10 flex flex-justify-between" :class="`blue-${i} ${i>5?'text-white':'text-dark'}`">
        <span>{{ 'Blue'+i }}</span>
      </div>
    </div>
    <div class="w200 mx15">
      <div v-for="i of 11" :key="i" class="h40 px10 flex flex-justify-between" :class="`cyan-${i} ${i>5?'text-white':'text-dark'}`">
        <span>{{ 'Cyan'+i }}</span>
      </div>
    </div>
    <div class="w200 mx15">
      <div v-for="i of 10" :key="i" class="h40 px10 flex flex-justify-between" :class="`link-${i} ${i>5?'text-white':'text-dark'}`">
        <span>{{ 'Link'+i }}</span>
      </div>
    </div>
    <div class="w200 mx15">
      <div v-for="i of 10" :key="i" class="h40 px10 flex flex-justify-between" :class="`error-${i} ${i>5?'text-white':'text-dark'}`">
        <span>{{ 'Error'+i }}</span>
      </div>
    </div>
    <div class="w200 mx15">
      <div v-for="i of 10" :key="i" class="h40 px10 flex flex-justify-between" :class="`warning-${i} ${i>5?'text-white':'text-dark'}`">
        <span>{{ 'Warning'+i }}</span>
      </div>
    </div>
    <div class="w200 mx15">
      <div v-for="i of 14" :key="i" class="h40 px10 flex flex-justify-between" :class="`gray-${i} ${i>5?'text-white':'text-dark'}`">
        <span>{{ 'Gray'+i }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>

defineExpose({
  confirm: () => handleForm() // 确认按钮事件
});

const handleForm = () => {
  return new Promise((resolve) => {
    // 确认按钮事件逻辑
    setTimeout(() => {
      resolve({ a: 'a', b: 'b' });
    }, 1000 * 3);
  });
};
</script>

<style scoped lang="scss">
@import "../../src/styles/variable.scss";
@for $i from 1 through 11 {
  .brand-#{$i} {
    background-color: getColor($Brand, $i);
  }
  .green-#{$i} {
    // background-color: $Green#{$i};
    background-color: getColor($Green, $i);;
  }
  .blue-#{$i} {
    // background-color: $Blue#{$i};
    background-color: getColor($Blue, $i);;
  }
  .cyan-#{$i} {
    // background-color: $Cyan#{$i};
    background-color: getColor($Cyan, $i);;
  }
}
@for $i from 1 through 10 {
  .link-#{$i} {
    // background-color: $Link#{$i};
    background-color: getColor($Link, $i);;
  }
  .error-#{$i} {
    // background-color: $Error#{$i};
    background-color: getColor($Error, $i);;
  }
  .warning-#{$i} {
    // background-color: $Warning#{$i};
    background-color: getColor($Warning, $i);;
  }
}
@for $i from 1 through 14 {
  .gray-#{$i} {
    // background-color: $Gray#{$i};
    background-color: getColor($Gray, $i);;
  }
}

</style>